<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.copy-btn {
	padding-left: 4px;
	cursor: pointer;
}

.card-width {
	min-width: 450px;
	max-width: 450px !important;
}

.notice-title {
	max-width: 300px;
	white-space: normal;
}

.view-notice-title {
	text-align: center;
	font-size: 18px;
}

.view-notice-publish-time {
	color: #9e9e9e;
	line-height: 2;
	padding-bottom: 10px;
}

.view-notice-content {
	
}
</style>
</head>
<body>
	<script src="https://cdn.jsdelivr.net/npm/dayjs@1.7.8/dayjs.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js"></script>
	<div th:replace="common/header::html"></div>
	<div id="q-app">
		<q-dialog persistent v-model="showViewNoticeFlag" full-height> <q-card style="min-width: 450px !important; max-width: 450px !important;"> <q-card-section
			class="row items-center q-pb-none">
		<div class="text-h6"></div>
		<q-space></q-space> <q-btn icon="close" flat round dense v-close-popup></q-btn> </q-card-section> <q-card-section class="q-pt-none">
		<div>
			<div class="view-notice-title">{{selectedNotice.title}}</div>
			<div class="view-notice-publish-time">
				<span style="padding-right: 4px; color: #0080ff;">{{selectedNotice.typeName}}</span>{{selectedNotice.publishTime}}
			</div>
			<div class="view-notice-content" v-html="selectedNotice.content"></div>
		</div>
		</q-card-section> </q-card> </q-dialog>
		<q-dialog persistent v-model="showAddOrUpdateDialogFlag"> <q-card style="min-width: 450px !important; max-width: 450px !important;"> <q-card-section
			class="row items-center q-pb-none">
		<div class="text-h6">{{addOrUpdateAction == 'add' ? '新增公告' : '编辑公告'}}</div>
		<q-space></q-space> <q-btn icon="close" flat round dense v-close-popup></q-btn> </q-card-section> <q-card-section class="q-pt-none"> <q-form class="q-gutter-md"> <q-input outlined
			type="textarea" rows="3" v-model="selectedNotice.title" label="公告标题" :dense="true"></q-input> <q-input outlined v-model="selectedNotice.publishTime" label="发布时间" :dense="true"> <template
			v-slot:append> <q-icon name="event" class="cursor-pointer"> <q-popup-proxy transition-show="scale" transition-hide="scale"> <q-date
			v-model="selectedNotice.publishTime" mask="YYYY-MM-DD HH:mm">
		<div class="row items-center justify-end">
			<q-btn v-close-popup label="确定" color="primary" flat></q-btn>
		</div>
		</q-date> </q-popup-proxy> </q-icon> <q-icon name="access_time" class="cursor-pointer"> <q-popup-proxy transition-show="scale" transition-hide="scale"> <q-time v-model="selectedNotice.publishTime"
			mask="YYYY-MM-DD HH:mm" format24h>
		<div class="row items-center justify-end">
			<q-btn v-close-popup label="确定" color="primary" flat></q-btn>
		</div>
		</q-time> </q-popup-proxy> </q-icon> </template> </q-input>
		<div>
			<template v-for="dictItem in typeDictItems"> <q-radio v-model="selectedNotice.type" :val="dictItem.dictItemCode" :label="dictItem.dictItemName"></q-radio> </template>
		</div>
		<q-editor v-model="selectedNotice.content" min-height="300px" max-height="300px"></q-editor> </q-form> </q-card-section> <q-card-actions align="right"> <q-btn label="保存" color="primary"
			@click="addOrUpdateNotice"></q-btn> </q-card-actions> </q-card> </q-dialog>
		<div class="q-pa-md">
			<q-table color="primary" :data="tableData" :columns="tableColumns" :pagination.sync="tablePagination" :rows-per-page-options="[10, 30, 50, 100]" :loading="tableDataLoading" @request="loadTableData">
			<template v-slot:top-left>
			<div class="q-gutter-md row query-cond">
				<q-select clearable outlined v-model="type" emit-value map-options :options="typeDictItems" option-value="dictItemCode" option-label="dictItemName" label="公告类型" :dense="true"> </q-select>
				<q-input outlined v-model="title" label="公告标题" :dense="true"></q-input>
				<q-btn color="primary" label="查询" icon="search" @click="refreshTable"></q-btn>
			</div>
			</template> <template v-slot:top-right>
			<div class="q-gutter-md row">
				<q-btn outline color="primary" label="新增公告" @click="showAddDialog"></q-btn>
			</div>
			</template> <template v-slot:body-cell-notice_title="props"> <q-td :props="props">
			<div style="font-size: smaller;">
				<div class="notice-title">
					<span>【{{props.row.typeName}}】</span>{{props.row.title}}
				</div>
			</div>
			</q-td> </template> <template v-slot:body-cell-action="props"> <q-td :props="props">
			<div class=" q-gutter-sm">
				<q-btn color="primary" label="编辑" @click="showEditDialog(props.row.id)"></q-btn>
				<q-btn color="primary" label="查看内容" @click="viewNotice(props.row)"></q-btn>
				<q-btn-dropdown color="primary" label="更多"> <q-list> <q-item clickable v-close-popup @click="delNotice(props.row.id)"> <q-item-section> <q-item-label>删除</q-item-label>
				</q-item-section> </q-item> </q-list> </q-btn-dropdown>
			</div>
			</q-td> </template> <template v-slot:loading> <q-inner-loading showing color="primary"></q-inner-loading> </template> </q-table>
		</div>
	</div>
	<script src="/js/notice.js"></script>
</body>
</html>